<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="[16, 16]">
            <a-col :md="8" :sm="24">
              <a-form-item label="规则编号">
                <a-input v-model:value="queryParam.id" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="使用状态">
                <a-select v-model:value="queryParam.status" placeholder="请选择" default-value="0">
                  <a-select-option value="0">全部</a-select-option>
                  <a-select-option value="1">关闭</a-select-option>
                  <a-select-option value="2">运行中</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item label="调用次数">
                  <a-input-number v-model:value="queryParam.callNo" style="width: 100%" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="更新日期">
                  <a-date-picker v-model:value="queryParam.date" style="width: 100%" placeholder="请输入更新日期" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="使用状态">
                  <a-select v-model:value="queryParam.useStatus" placeholder="请选择" default-value="0">
                    <a-select-option value="0">全部</a-select-option>
                    <a-select-option value="1">关闭</a-select-option>
                    <a-select-option value="2">运行中</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="使用状态">
                  <a-select placeholder="请选择" default-value="0">
                    <a-select-option value="0">全部</a-select-option>
                    <a-select-option value="1">关闭</a-select-option>
                    <a-select-option value="2">运行中</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="(!advanced && 8) || 24" :sm="24">
              <span
                class="table-page-search-submitButtons"
                :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
              >
                <a-button type="primary" @click="table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="resetQueryParam">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? "收起" : "展开" }}
                  <up-outlined v-if="advanced" />
                  <down-outlined v-else />
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <br />
      <div class="table-operator">
        <a-button type="primary" @click="handleAdd"><plus-outlined />新建</a-button>
        <a-dropdown v-if="rowSelection.selectedRowKeys.length > 0">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1"><delete-outlined />删除</a-menu-item>
              <!-- lock | unlock -->
              <a-menu-item key="2"><lock-outlined />锁定</a-menu-item>
            </a-menu>
          </template>
          <a-button style="margin-left: 8px"> 批量操作 <down-outlined /> </a-button>
        </a-dropdown>
      </div>
      <br />
      <s-table
        ref="table"
        size="default"
        rowKey="key"
        :columns="columns"
        :data="loadData"
        :alert="true"
        :rowSelection="rowSelection"
        showPagination="auto"
      >
        <template #bodyCell="{ column, record, index, text }">
          <span v-if="column.title === '#'">{{ index + 1 }}</span>
          <a-badge
            v-else-if="column.dataIndex === 'status'"
            :status="statusTypeFilter(text)"
            :text="statusFilter(text)"
          />
          <span v-else-if="column.dataIndex === 'action'">
            <a @click="handleEdit(record)">配置</a>
            <a-divider type="vertical" />
            <a @click="handleSub(record)">订阅报警</a>
          </span>
        </template>
      </s-table>

      <create-form
        v-if="visible"
        ref="createModal"
        :visible="visible"
        :loading="confirmLoading"
        :model="mdl"
        @cancel="handleCancel"
        @ok="handleOk"
      />
      <step-by-step-modal ref="modal" @ok="handleOk" />
    </a-card>
  </page-header-wrapper>
</template>

<script lang="ts">
import { defineComponent, computed, ref, unref, reactive, toRaw } from "vue";
import { message, Form } from "ant-design-vue";
import dayjs from "dayjs";
import { STable } from "@/components/index";
import { getRoleList, getServiceList } from "@/api/manage";

import StepByStepModal from "./modules/StepByStepModal.vue";
import CreateForm from "./modules/CreateForm.vue";

interface QueryParam {
  id?: number;
  status?: number;
  date?: dayjs.Dayjs;
  callNo?: number;
  useStatus?: number;
}

export default defineComponent({
  name: "TableList",
  components: {
    STable,
    CreateForm,
    StepByStepModal,
  },
  setup() {
    const useForm = Form.useForm;
    const table = ref(null);
    const createModal = ref(null);
    const modal = ref(null);
    const columns = [
      {
        title: "#",
        scopedSlots: { customRender: "serial" },
      },
      {
        title: "规则编号",
        dataIndex: "no",
      },
      {
        title: "描述",
        dataIndex: "description",
        ellipsis: true,
      },
      {
        title: "服务调用次数",
        dataIndex: "callNo",
        sorter: true,
        needTotal: true,
        customRender: ({ text }) => text + " 次",
      },
      {
        title: "状态",
        dataIndex: "status",
        scopedSlots: { customRender: "status" },
      },
      {
        title: "更新时间",
        dataIndex: "updatedAt",
        sorter: true,
      },
      {
        title: "操作",
        dataIndex: "action",
        width: "150px",
        scopedSlots: { customRender: "action" },
      },
    ];

    const statusMap = {
      0: {
        status: "default",
        text: "关闭",
      },
      1: {
        status: "processing",
        text: "运行中",
      },
      2: {
        status: "success",
        text: "已上线",
      },
      3: {
        status: "error",
        text: "异常",
      },
    };
    const dataSource = reactive({});

    const formRef = reactive(<QueryParam>{
      id: 0,
      status: undefined,
      date: dayjs(new Date()),
      callNo: undefined,
      useStatus: undefined,
    });
    const rulesRef = reactive({});
    const { resetFields, validate, validateInfos } = useForm(formRef, rulesRef);

    // create model
    const visible = ref(false);
    const confirmLoading = ref(false);
    const mdl = ref(null);
    // 高级搜索 展开/关闭
    const advanced = ref(false);
    // 查询参数
    const queryParam = reactive(<QueryParam>{});
    // 加载数据方法 必须为 Promise 对象
    const loadData = (parameter) => {
      const requestParameters = Object.assign({}, parameter, queryParam);
      // console.log('loadData request parameters:', requestParameters)
      return getServiceList(requestParameters)
        .then((res) => {
          return res.data;
        })
        .catch((err) => {
          console.log("error", err);
        });
    };

    const statusFilter = computed(() => (type) => statusMap[type].text);
    const statusTypeFilter = computed(() => (type) => statusMap[type].status);

    const selectedRowKeys = ref([]);
    const selectedRows = ref([]);

    const onSelectChange = (rowKeys, rows) => {
      selectedRowKeys.value = unref(rowKeys);
      selectedRows.value = toRaw(rows);
    };

    // const rowSelection = computed(() => {
    //   return {
    //     selectedRowKeys: unref(selectedRowKeys),
    //     selectedRows: unref(selectedRows),
    //     onChange: onSelectChange
    //   }
    // })

    const rowSelection = ref({
      type: "radio",
      selectedRowKeys: toRaw(selectedRowKeys.value),
      onChange: (selectedRowKey, selectedRows) => {
        console.log(selectedRowKey);
      },
    });

    const resetQueryParam = () => {
      queryParam.id = undefined;
      queryParam.status = undefined;
      queryParam.date = undefined;
      queryParam.callNo = undefined;
      queryParam.useStatus = undefined;
    };

    const handleAdd = () => {
      rowSelection.value.selectedRowKeys = [2]
      // mdl.value = null;
      // visible.value = true;
    };
    const handleEdit = (record) => {
      visible.value = true;
      mdl.value = { ...record };
    };
    const handleOk = () => {
      confirmLoading.value = true;
      // @ts-ignore
      createModal.value
        .validate()
        .then((result) => {
          console.log("createModal validate", result);
          // @ts-ignore
          if (result.id > 0) {
            // 修改 e.g.
            new Promise((resolve, reject) => {
              setTimeout(() => {
                resolve(result);
              }, 1000);
            }).then((res) => {
              visible.value = false;
              confirmLoading.value = false;
              // 重置表单数据
              resetFields();
              // 刷新表格
              // @ts-ignore
              table.value.refresh();
              message.info("修改成功");
            });
          } else {
            // 新增
            new Promise((resolve, reject) => {
              setTimeout(() => {
                resolve(0);
              }, 1000);
            }).then((res) => {
              visible.value = false;
              confirmLoading.value = false;
              // 重置表单数据
              resetFields();
              // 刷新表格
              // @ts-ignore
              table.value.refresh();
              message.info("新增成功");
            });
          }
        })
        .catch(() => {
          confirmLoading.value = false;
          // console.log('error', err)
        });
    };

    const handleCancel = () => {
      visible.value = false;
      // 清理表单数据（可不做）
      resetQueryParam();
    };
    const handleSub = (record) => {
      if (record.status !== 0) {
        message.info(`${record.no} 订阅成功`);
      } else {
        message.error(`${record.no} 订阅失败，规则已关闭`);
      }
    };

    const toggleAdvanced = () => {
      advanced.value = !advanced.value;
    };

    //created
    getRoleList({ t: new Date() });

    return {
      table,
      createModal,
      modal,
      columns,
      dataSource,
      formRef,
      resetFields,
      validate,
      validateInfos,
      statusMap,
      visible,
      confirmLoading,
      mdl,
      advanced,
      queryParam,
      loadData,
      statusFilter,
      statusTypeFilter,
      rowSelection,
      onSelectChange,
      resetQueryParam,
      handleAdd,
      handleEdit,
      handleOk,
      handleCancel,
      handleSub,
      toggleAdvanced,
    };
  },
});
</script>
